<template>
  <div :class="[border && 'is-border']" class="common-search">
    <div class="common-search__icon">
      <slot name="icon">
        <image src="@/assets/icon/search-icon.png" class="search-icon" />
      </slot>
    </div>
    <div class="common-search__center">
      <template v-if="type === 'button'">请输入要搜索的内容</template>
      <template v-else>
        <input v-model="searchWord" placeholder="请输入要搜索的内容" />
      </template>
    </div>
    <div class="common-search__btn">
      <slot name="btn">
        <div class="search-btn" @tap="search">
          <span>搜索</span>
        </div>
      </slot>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";
defineOptions({
  name: "CommonSearch",
});

const props = withDefaults(
  defineProps<{
    modelValue?: string;
    type?: "button" | "input";
    border?: boolean;
  }>(),
  {
    modelValue: "",
    type: "input",
    border: false,
  }
);
const emits = defineEmits([
  "update:modelValue",
  "change",
  "search",
  "blur",
  "focus",
]);

const searchWord = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    emits("update:modelValue", val);
    emits("change", val);
  },
});

const search = () => {
  emits("search", searchWord.value);
};

const onBlur = () => {
  emits("blur");
};

const onFocus = () => {
  emits("focus");
};
</script>

<style lang="less">
.common-search {
  width: 100%;
  height: 80px;
  padding: 18px 20px 18px 30px;
  color: #8a8a8a;
  background-color: white;
  border-radius: 40px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 40px;
  &.is-border {
    border: 2px solid #d6d6d6;
  }
  &__icon {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  &__center {
    flex: 1;
    width: 0;
    height: 100%;

    font-weight: 400;
    font-size: 28px;
    color: #8a8a8a;
    line-height: 40px;
  }
  .search-icon {
    width: 28px;
    height: 30px;
  }
  .search-btn {
    width: 120px;
    height: 56px;
    background: linear-gradient(90deg, #7bd4c4 0%, #5dc5b0 100%);
    border-radius: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    span {
      font-weight: 400;
      font-size: 26px;
      letter-spacing: 2px;
      color: #ffffff;
      line-height: 40px;
    }
  }
}
</style>
